import {  Radio, Input, Space  , Col, Row, DatePicker,Divider,Button ,Pagination} from 'antd';

import React, { useState} from 'react';
const { RangePicker } = DatePicker;
import styles from './style.less'
import userreport from '/public/userreport.png';
import fenxi from '/public/fenxi.jpg';
import print from '/public/print.png';

import user5 from '/public/report/user/11.png';
import user6 from '/public/report/user/22.png';
import user7 from '/public/report/user/33.png';
import user8 from '/public/report/user/44.png';
import user9 from '/public/report/user/55.png';
//react文件预览支持docx，xlsx
import FileViewer from 'react-file-viewer';
//react预览pdf文件插件
import PDF from 'react-pdf-js';


import { SearchOutlined} from '@ant-design/icons';
import html2canvas from 'html2canvas';
import printJS from 'print-js';

const UserReport: React.FC = () => {




  const [page,setPage] = useState<number>(1)  ;
  const [value,setValue] = useState<number>(1)  ;
  const [pages,setPages] = useState<number>(null)  ;
  const [pdfbase64,setpdfBase64] = useState<any>(null)  ;
  
  const onDocumentComplete = (pages) => {
 
    setPages(pages);
}
//点击上一页
const handlePrevious = () => {
  setPage(page-1);
   
}
//点击下一页
const handleNext = () => {
  setPage(page+1);
}
  function onChange(e) {
    console.log('radio checked', e.target.value);
    setValue(e.target.value)
     
  };
  const onSearch = (val) => {
    console.log('search:', val);
  }
  const changepage = (page) => {
    setPage(page);
  }

  function _print(imageData) {
   
    printJS({
        printable: imageData,
        type: 'image',
        documentTitle: '&nbsp'
    });
    //that.afterPrint();
}

  const handlePrint = () => {
// 先用html2canvas将页面整个转为一张截图，再打印，防止出现echarts无法打印


const targetDom = document.querySelector("#pdfPrint")
  html2canvas(targetDom , {
    backgroundColor: null,
    useCORS: true,
    height: targetDom.scrollHeight,
    width: targetDom.scrollWidth
  }).then(canvas => {
      const imageData = canvas.toDataURL("image/jpeg", 1);
    _print(imageData);
  });

  }

    return (
      <div className={styles.report}>
        <Row        style={{ margin: '-16px 0 '}} > 
          <Col xl={6} lg={6} md={6} sm={6} xs={6} style={{  padding: '24px 12px', borderRight: '1px solid #355fb8' }}>
            <div  className={styles.inputBg} >
              <RangePicker  popupStyle={{ background: 'rgb(20, 49, 115)'}}    bordered={false}  />
            </div>
            <div style={{    backgroundColor: '#40a9ff',borderRadius: '3px',    marginTop: '16px'}}>
                <Input bordered={false}  className={styles.inputBg} suffix={ <SearchOutlined onClick={onSearch}  style={{    fontSize: '20px'}}/> }
                />
              </div>
              <Divider style={{    borderTop: '2px solid #355fb8'}}></Divider>
       
              <Radio.Group onChange={onChange} value={value}>
              <Space direction="vertical">
                <Radio value={1}>全部</Radio>
                <Radio value={2}>三栋二车间</Radio>
                <Radio value={3}>三栋三车间</Radio>
                <Radio value={4}>三栋四车间</Radio>
                <Radio value={5}>三栋二车间</Radio>
                <Radio value={6}>三栋三车间</Radio>
                <Radio value={7}>三栋四车间</Radio>
              </Space>
            </Radio.Group>
          </Col>
          <Col xl={18} lg={18} md={18} sm={18} xs={18} style={{ padding: 22 }} className={styles.servuychart}>
            <Row gutter={[0,24]} style={{justifyContent: 'space-around'}}>
              <div style={{    height: '900px',width: '620px',overflowY: 'scroll'}}  id='imgPrint'>
                {/* <Image width={600}   height={800} src={'https://picture.sxhalo.com/picture/993aac89a4ce31fd36dceb7a836a2689'}   preview={false} />
                <Image width={600}   height={800} src={user6}   preview={false} />
                <Image width={600}   height={800} src={user7}   preview={false} />
                <Image width={600}   height={800} src={user8}   preview={false} />
                <Image width={600}   height={800} src={user9}   preview={false} /> */}
        
              </div>
                {/* <Image width={80}   height={80} src={print}  preview={false} /> */}
            </Row> 
               <Row gutter={[0,24]} style={{justifyContent: 'space-around'}}>
                                            <div>
                                  <div style={{    height: '900px',width: '620px'}} id='pdfPrint'>
                                     <PDF
                                          //file={report}
                                          file="http://it-image.walimaker.com/2019/01/02/dc39e4ea855980d3e46cc9c89c7a852b.pdf"
                   
                                          onDocumentComplete={onDocumentComplete}
                                          page={page}
                                      /> 
                                      <Pagination style={{margin:'auto',textAlign: 'center'}} defaultCurrent={1}  onChange={changepage}  defaultPageSize={1}  total={pages}   showTotal={(total, range) => `${page}/${total}`}   />
                                  
                                  </div>
                                
                                  {/* <div className={styles.filePdfFooter}>
                                      {page === 1 ?
                                          null
                                          :
                                          <Button type='primary' onClick={handlePrevious}>上一页</Button>
                                      }
                                      <div className={styles.filePdfPage}>
                                          <span>第{page}页</span>/<span>共{pages}页</span>
                                      </div>
                                      {page === pages ?
                                          null
                                          :
                                          <Button style={{ marginLeft: '10px' }} type='primary' onClick={handleNext}>下一页</Button>
                                      }
                                  </div> */}
                              </div>
                              <Button type='ghost' onClick={handlePrint}>打印</Button>
              
            </Row> 
          
          </Col>
        </Row>
      
  </div>
    );
};

export default UserReport;